<script setup>
import { onMounted, ref, getCurrentInstance, toRefs, inject } from 'vue'

const emits = defineEmits(['emitSend', 'emitDoc'])
const props = defineProps({
  cardType: {
    type: String,
    default: '0',
  },
})

const { cardType } = toRefs(props)
const { appContext } = getCurrentInstance()
const agentConfig = inject('agentConfig')
const showUserInput = inject('showUserInput')
const messages = inject('messages')
const proxy = appContext.config.globalProperties
const config = proxy.$config
// 重组数组
const chunkArray = (arr, size) => {
  const result = []
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}
const welcomeWord = agentConfig.value?.model_config.opening_statement
// 校园问答tab
let hotKnowledgeArray = []
hotKnowledgeArray = agentConfig.value?.model_config.suggested_questions || []
const initialData = ref(hotKnowledgeArray)
const hotKnowledge = ref([])
hotKnowledge.value = chunkArray(initialData.value, 3)

// 点击列表
const handleClick = (item) => {
  emits('emitSend', item)
}
// 点击表单
const showForm = inject('showForm')
const handleShowForm = () => {
  if (messages.value.length>1) {
    proxy.$toast('对话已开始，无法修改对话设置')
    return
  }
  showForm.value = true
}

onMounted(() => {})
</script>

<template>
  <div class="suggestview">
    <div class="card-header" v-if="welcomeWord">
      <div class="left">{{ welcomeWord }}</div>
    </div>
    <div class="content">
      <div class="tab tab1" v-if="cardType === '1'">
        <template v-if="initialData.length">
          <van-swipe class="lists" indicator-color="#4792E4">
            <van-swipe-item v-for="(item, index) in hotKnowledge" :key="index">
              <div
                class="wrap"
                v-for="(c_item, c_index) in item"
                :key="c_index"
              >
                <div class="item" @click="handleClick(c_item)">
                  <span class="c oneline">{{ c_item }}</span>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
          <div class="userSet" v-if="showUserInput" @click="handleShowForm"> <img src="../../../assets/img/usrset.png"> <span>开始前，您可以修改对话设置</span> <van-icon name="arrow" /> </div>
        </template>
        <template v-else>
          <div class="empty">
            <img src="../../../assets/img/empty.png" />
            <span>暂无内容</span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.suggestview {
  background: white;
  border-radius: 0.32rem;
  font-size: 0.28rem;
  margin-bottom: 0.2rem;
  .card-header {
    padding: 0.2rem;
    border-radius: 0.32rem 0.32rem 0 0;
    background: linear-gradient(274deg, #c1e2ff 0%, #dcefff 100%);
    box-shadow: inset 0px 0.02rem 0.16rem 0px rgba(13, 85, 255, 0.09);
    .left {
      font-size: 0.32rem;
      color: #2d4662;
    }
  }
  .content {
    width: 100%;
    height: auto;
    background: #fff;
    padding-bottom: 0.3rem;
    overflow: hidden;
    border-radius: 0.14rem;
    .userSet {
      display: flex;
      align-items: center;
      padding: 0.2rem;
      height: .6rem;
      background-color: #f2f2f2;
      border-radius: .15rem;
      img{
        width: 0.34rem;
        height: 0.34rem;
        margin-right: 0.1rem;
      }
      span{
        flex: 1;
      }
    }
  }
  :deep(.van-swipe__indicator) {
    background-color: #d8d8d8;
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    img {
      width: 2rem;
      height: auto;
    }
    span {
      color: #999;
      font-size: 0.2rem;
    }
  }
}
.tab {
  min-height: 2.6rem;
  .van-swipe-item {
    height: auto;
  }
}
.tab1 {
  height: 100%;
  padding: 0.12rem 0.12rem 0 0.12rem;
  .type {
    display: flex;
    align-items: center;
    color: #666;
    position: relative;
    .tags {
      flex: 1;
      overflow-x: scroll;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      position: relative;
      .tag {
        padding: 0 0.2rem;
        word-break: keep-all;
        white-space: nowrap;
        margin-right: 0.32rem;
        color: #323233;
        font-weight: 400;
        position: relative;
        height: 0.52rem;
        background: #d9efff;
        border-radius: 0.26rem;
        line-height: 0.52rem;
        font-size: 0.24rem;
        background: #f5f5f5;
      }
      .act {
        background-color: #d9efff;
        font-weight: 500;
      }
      .tag:last-child {
        margin-right: 0;
      }
    }
    .tags:hover::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  .lists {
    width: 100%;
    color: #333;
    font-size: 0.28rem;
    // margin-top: 0.06rem;
    padding-bottom: 0.36rem;
    .wrap {
      display: flex;
      align-items: center;
      .item {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
        border-bottom: 0.5px solid #eee;
        overflow: hidden;
        height: 0.8rem;
        line-height: 0.8rem;
        .c {
          position: relative;
          flex: 1;
          font-weight: 400;
          font-size: 0.24rem;
          color: #56616c;
        }
        .next {
          width: 0.44rem;
          height: 0.44rem;
          background-image: url('../../../assets/img/search.png');
          background-size: 100% 100%;
        }
      }
      &:last-child {
        .item {
          border: none;
        }
      }
    }
  }
}
.tab2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 0.16rem;
  .app {
    :deep(.van-grid-item__content) {
      padding: 0.24rem 0;
      .van-grid-item__text {
        font-weight: 500;
        font-size: 0.24rem;
        color: #546275;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
      }
    }
    padding-bottom: 0.36rem;
  }
}
</style>
